<!-- 由index跳转 书籍评论界面-->

<template>
	<view class="bd">
		<AddCommentComp v-show="showModel" @addCommentFun="addCommentFunTo(text)" @backFun="showModel=false">
		</AddCommentComp>

		<scroll-view class="book-msg" scroll-y>
			<view class="book-title">
				<view class="book-pic">
					<image :src="getBookItemMsg.bookImg" class="book-pic-content"></image>
				</view>

				<view class="book-title-text">
					<view class="book-name">
						{{getBookItemMsg.bookName}}
					</view>
					<view class="book-author">
						{{getBookItemMsg.author}}
					</view>
				</view>
			</view>

			<view class="book-introduct">
				<view class="introTitle">
					<view></view>
					<text>内容简介</text>
					<view></view>
				</view>

				<view class="book-introduct-inner" v-if="getBookItemMsg.bookDescription">
					{{getBookItemMsg.bookDescription}}
				</view>
				<view class="book-introduct-inner" v-else style="color: #888; font-size: 0.9rem; font-weight: lighter;">
					暂时还没有介绍哦~
				</view>
			</view>

			<view class="bookCommentsHeader">
				<text>热门书评 ({{ getBookCommentArray.length }}条)</text>
				<text style="color: #f40; font-weight: bold;" @click="gotoAddComment(1,0)">+ 发表书评</text>
			</view>

			<view class="hot-comment">
				<!-- 热门书评 -->

				<view class="hot-comment-item" v-for="(item,index) in  getBookCommentArray" :key="index">

					<view class="hot-comment-item-person">
						<image class="perPic" :src="item.avatarurl"
							@click="gotoUrl(`/pages/userhome/userhome?id=${item.userId}`)"></image>
						<view class="perName" @click="gotoUrl(`/pages/userhome/userhome?id=${item.userId}`)">
							{{item.nickname}}
						</view>

						<view class="hot-comment-item-attitude">
							认为本书{{ ['不好看', '一般般', '好看'][item.rating - 1] }}
						</view>
					</view>

					<view class="hot-comment-item-comment">
						{{item.comment}}
					</view>

					<view class="hot-comment-item-other">
						<view class="time">
							{{item.commentTime[0]}}-{{item.commentTime[1]}}-{{item.commentTime[2]}}
						</view>

						<image class="imgI" src="../../static/消息.png" @click="gotoAddComment(0,item.id)"></image>
						<view class="commentNumber" v-if="item.underComment" @click="gotoAddComment(0,item.id)">
							{{item.underComment.length}}
						</view>
					</view>


					<!-- 二级评论展示区域start -->
					<view class="UnderShow" v-if="item.underComment && item.underComment.length"
						@click="gotoAddComment(0,item.id)">
						<view class="UnderItem" v-for="(item1,index1) in item.underComment" :key="index1">
							<text style="color: rgb(120, 130, 162);font-weight: 700;"
								@click.stop="gotoUrl(`/pages/userhome/userhome?id=${item1.userId}`)">{{item1.nickname}}</text>：{{item1.comment}}
						</view>
					</view>
					<!-- 二级评论展示区域end -->
					<!-- </view> -->
				</view>

				<view class="blank-list-placeholder" v-if="!getBookCommentArray.length">评论区竟然是空的~</view>
			</view>

		</scroll-view>

		<view class="book-bug-btn">
			<view class="bottom-action" @click="gotoAddComment(1,0)">
				<u-icon name="chat" size="64rpx" label="评论" labelPos="bottom" labelSize="22rpx" space="-4rpx"></u-icon>
			</view>

			<view class="bottom-action" v-if="isBookFavorited" @click="unfav()">
				<u-icon name="star-fill" size="64rpx" label="已收藏" labelPos="bottom" labelSize="22rpx" space="-4rpx"
					color="#f60" label-color="#f60"></u-icon>
			</view>
			<view class="bottom-action" v-else @click="addfav()">
				<u-icon name="star" size="64rpx" label="收藏" labelPos="bottom" labelSize="22rpx" space="-4rpx"></u-icon>
			</view>

			<view class="bottom-action-btn-filled">
				<view style="background: linear-gradient(20deg, rgb(255 185 72), rgb(255 112 0));"
					@click="goto(getBookItemMsg.bookUrl)">点击阅读</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		getBookByMsg, //抓取书籍
		getBookComment, //抓取评价
		getUserSomeMsg, //获取玩家简略信息
		showUserBooklist,
		addtoUserBooklist, //添加书籍到书架
		delfromUserBooklist,
		addBookComment, //新增书评或评论
	} from '@/config/api.js'
	import AddCommentComp from '../models/commentModel.vue'
	import {
		gotoUrl,
		addHistory
	} from '../../utils'
	export default {
		components: {
			AddCommentComp
		},
		data() {
			return {
				gotoUrl,

				//id,bookName,bookImg,bookDescription,bookCategories,author,permission
				getBookItemMsg: {
					"author": "",
					"bookCategories": 0,
					"bookDescription": "",
					"bookImg": "",
					"bookName": "",
					"bookUrl": "",
					"id": 0,
					"permission": 0
				}, //获取到的书籍信息
				getBookItemMsg: {},

				showModel: false, //是否展示二级评论的输入框（模态弹出）

				getBookCommentArray: [{
					"avatarurl": "",
					"comment": "",
					"commentTime": "",
					"gender": 0,
					"id": 0,
					"nickname": "",
					"rating": 0,
					"userId": 0
				}],
				getBookCommentArray: [],
				//抓取到的 评论数组

				isBookFavorited: false,

			}
		},
		mounted() {
			//this.getBookByMsgFun() //抓取书评和评论
		},
		created() {
			//this.getBookByMsgFun() //抓取书评和评论
		},
		onShow() {
			this.getBookComments(); // 在页面显示时调用函数
			this.getBookFavoriteStatus()
		},
		onLoad(options) {
			if (options.item) {
				// this.setData({
				// 	item: JSON.parse(options.item)
				// });
				console.log("page initiated with book props:", options.item)
				try {
					this.getBookItemMsg = JSON.parse(options.item)
				} catch (e) {
					this.getBookItemMsg = JSON.parse(decodeURIComponent(options.item))
				}

				addHistory(this.getBookItemMsg.bookName, this.getBookItemMsg.bookImg)

				//that.getBookByMsgFun() //抓取书评和评论
			}
		},

		methods: {
			//点击发表函数start
			async addCommentFunTo(text) {
				if (text == '') {
					uni.showToast({
						title: '内容为空',
						icon: 'none'
					})
					return
				} else if (text !== '') {
					var sendMsg = {}
					sendMsg.bookId = this.getBookItemMsg.id
					sendMsg.comment = text
					sendMsg.isBookRating = 0 //1书评,0评论
					sendMsg.parentId = 0 //一级评论

					sendMsg.rating = 1 //评分1~3   //二级评论无所谓有没有，暂且保留

					const res = await addBookComment(sendMsg)
					console.log("发送评论成功：" + JSON.stringify(res))
					uni.showToast({
						title: '发送评论成功',
						icon: 'none'
					})
				}
			},

			//添加书籍到书架
			addfav(id) {
				addtoUserBooklist(this.getBookItemMsg.id).then(() => {
					uni.showToast({
						title: '收藏成功，可在书架查看',
						icon: 'none'
					})
					this.getBookFavoriteStatus()
				}).catch(err => {
					console.error(err)
					uni.showToast({
						title: '添加失败!',
						icon: 'error'
					})
				})
			},

			unfav(id) {
				delfromUserBooklist(this.getBookItemMsg.id).then(() => {
					uni.showToast({
						title: '取消收藏成功',
						icon: 'none'
					})
					this.getBookFavoriteStatus()
				}).catch(err => {
					console.error(err)
					uni.showToast({
						title: '取消收藏失败!',
						icon: 'error'
					})
				})
			},

			//添加书评
			gotoAddComment(type, itemid) {
				//书评的类型，1书评，0评论
				uni.navigateTo({
					url: `/pages/bookMain/bookMainComment/bookMainComment?id=${this.getBookItemMsg.id}&type=${type}&itemid=${itemid}`
				})
			},

			////获取二级评论
			async addCommentsUnder(arr) {
				const promises = arr.map(async (item) => {
					const res = await getBookComment({
						bookId: this.getBookItemMsg.id,
						isBookRating: 0, //0为评论,1为书评
						parentId: item.id, //二级评论
					})
					console.log("replies for comment", item.id, res)
					this.$set(item, 'underComment', res)
				})
				await Promise.all(promises)

				console.log("book comments with replies: ", this.getBookCommentArray)
			},

			goto(url1) {
				//需要跳转的外部路径
				let url = url1
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + url1
				})
			},

			async getBookComments() {
				try {
					//先抓取评论
					const res = await getBookComment({
						bookId: this.getBookItemMsg.id,
						isBookRating: 1,
						parentId: 0,
					})

					if (this.getBookCommentArray.length == 0) {
						this.getBookCommentArray = res
						this.addCommentsUnder(this.getBookCommentArray)

					} else {
						// store res in a new array, get sub-comments, then assign it to the original
						// this can prevent flashes caused by loading a new array without sub-comments
						let tmpArr = res
						await this.addCommentsUnder(tmpArr)
						this.getBookCommentArray = tmpArr
					}

				} catch (err) {
					console.error(err)
				}
			},

			getBookFavoriteStatus() {
				showUserBooklist().then(res => {
					this.isBookFavorited = false
					res.forEach(item => {
						if (item.book.id == this.getBookItemMsg.id) {
							this.isBookFavorited = true
						}
					})
				}).catch(err => {
					console.error(err)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.UnderItem {
		padding: 6rpx;
		font-weight: 500;
		font-size: 0.8rem;
		line-height: 1.25rem;
	}

	.UnderShow {
		background-color: #eee;
		margin: 20rpx 8rpx 0;
		padding: 6rpx 12rpx;
		letter-spacing: 0.05rem;
		border-radius: 24rpx;
	}

	.commentNumber {
		font-size: 0.8rem;
		font-weight: 300;
	}

	.imgI {
		width: 36rpx;
		height: 36rpx;
	}

	.time {
		font-weight: 300;
		font-size: 0.8rem;
		flex: 1;
	}

	.hot-comment-item-other {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10rpx;
		margin: 0 12rpx;
	}

	.hot-comment-item-comment {
		position: relative;
		box-sizing: border-box;
		font-weight: 540;
		text-align: start;
		font-size: 1rem;
		margin: 16rpx 12rpx;
		//max-height: 4.5rem;
		/* 控制最大高度为3行 */
		//overflow: hidden;
	}

	.hot-comment-item-comment::after {
		//content: '展开>';
		position: absolute;
		bottom: 0;
		right: 0;
		color: rgb(120, 130, 162);

		background-color: #f8f8f8;
		box-shadow: 0 10rpx 0 10rpx #f8f8f8;
	}

	.hot-comment-item-comment:hover {
		max-height: initial;
		overflow: initial;
	}

	.hot-comment-item-comment:hover::after {
		display: none;
	}

	.hot-comment-item-attitude {
		font-weight: 500;
		font-size: 0.85rem;
		color: rgb(154, 154, 154);
	}

	.perName {
		flex: 1;
		min-width: 0;
		font-weight: 500;
	}

	.perPic {
		width: 2.7rem;
		height: 2.7rem;
		border-radius: 100%;
		background-color: bisque;
	}

	.hot-comment-item-person {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 16rpx;
		letter-spacing: initial;
	}

	.hot-comment-item {
		padding: 20rpx;
		height: auto;
		margin: 12rpx 20rpx;
		background-color: white;
		border-radius: 28rpx;
	}

	.hot-comment {
		font-size: 1rem;
		line-height: 1.5rem;
		display: flex;
		flex-direction: column;
	}

	.bookCommentsHeader {
		display: flex;
		justify-content: space-between;
		margin: 32rpx 28rpx 16rpx;
		letter-spacing: 0.05rem;
	}

	.book-introduct-inner {
		text-align: center;
		line-height: 1.7rem;
		padding: 20rpx 24rpx;
	}

	.introTitle {
		display: flex;
		gap: 20rpx;
		align-items: center;
		margin: 0 10%;
		padding: 30rpx 0 0;
		font-weight: bold;
	}

	.introTitle>view {
		flex: 1;
		height: 0.3rem;
		background: linear-gradient(to right, white, #f70);
	}

	.introTitle>view:last-child {
		transform: rotate(180deg);
	}

	.book-introduct {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 32rpx;
	}

	.tag-item {
		box-sizing: border-box;

		font-weight: 100;
		width: auto;
		margin: 0 17rpx;
		line-height: 70rpx;
		height: auto;

		border-radius: 30rpx;

		background-color: rgb(255, 251, 221);
	}

	.book-tag-inner {
		display: flex;

		margin: 20rpx;
	}

	.book-tag {
		font-weight: bold;
		box-sizing: border-box;
		height: auto;
		text-align: center;

		margin-top: 30rpx;

		/* background-color: white; */
		background-color: white;
	}

	.book-title-text {
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 32rpx;
	}

	.book-author {
		display: flex;
		justify-content: center;
	}

	.book-name {
		display: flex;
		justify-content: center;
		padding: 20rpx 24rpx;
		font-weight: bold;
		height: auto;
		font-size: 1.15rem;
	}

	.book-pic-content {
		width: 100%;
		height: 100%;
		box-shadow: 4rpx 4rpx 6rpx 3rpx darkgray;
		// rgb(179, 179, 179)
	}

	.book-pic {
		margin: 30rpx auto;
		width: 40vw;
		height: 40vw;
	}

	.book-title {
		background-color: white;
		background: none;
		overflow: hidden;
	}

	.bottom-action {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		letter-spacing: 0;
		font-weight: normal;
		width: 90rpx;
		height: 90rpx;
	}

	.bottom-action-btn-filled {
		display: flex;
		flex: 1;
		line-height: 70rpx;
		font-size: 0.9rem;
		border-radius: 100vw;
		overflow: hidden;
	}

	.bottom-action-btn-filled>view {
		flex: 1;
	}

	.book-bug-btn {
		display: flex;
		align-items: center;
		justify-items: center;
		gap: 16rpx;
		text-align: center;
		padding: 6rpx 16rpx;
		color: white;
		width: 100%;
		box-sizing: border-box;
		font-weight: bold;
		background-color: white;
	}

	.book-msg {
		min-width: 0;
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow-y: auto;
	}

	.bd {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
		letter-spacing: 0.1rem;
	}
</style>